<template>
	<div class="web_s">
		<!--轮播图-->
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src="//i0.hdslb.com/bfs/archive/b2bd13878c574f17ffff122a2210bef330afdcd4.jpg@480w_300h.webp"/></div>
				<div class="swiper-slide"><img src="//i0.hdslb.com/bfs/archive/b9f8699412918e915d2a492e7ea771e0829ac5fb.jpg@480w_300h.webp"/></div>
				<div class="swiper-slide"><img src="//i0.hdslb.com/bfs/archive/4bb27f41c7072af6d84a15bd837caee34d5e0283.jpg@480w_300h.webp"/></div>
				<div class="swiper-slide"><img src="//i0.hdslb.com/bfs/archive/015cc393ca606f7b1674305e1a06e06115ee5d55.jpg@480w_300h.webp"/></div>
			</div>
			<div class="swiper-pagination"></div>
		</div>
		<div class="content">
			<div class="c_wrap">
				<div v-for="(item,index) in sye"  class="fir">
					<img :src="item.pic" />
					<p>{{item.title}}</p>
					<div class="dw">
						<svg class="index__icon__src-commonComponent-Item-" aria-hidden="true">
							<use xlink:href="#icon-bofangshu"></use>
						</svg>
						<span>{{item.play}}</span>
						<svg id="icon-danmushu" viewBox="0 0 1024 1024" width="100%" height="100%">
							<path d="M800 128H224C134.4 128 64 198.4 64 288v448c0 89.6 70.4 160 160 160h576c89.6 0 160-70.4 160-160V288c0-89.6-70.4-160-160-160z m96 608c0 54.4-41.6 96-96 96H224c-54.4 0-96-41.6-96-96V288c0-54.4 41.6-96 96-96h576c54.4 0 96 41.6 96 96v448z"></path>
							<path d="M240 384h64v64h-64zM368 384h384v64h-384zM432 576h352v64h-352zM304 576h64v64h-64z"></path>
						</svg>
						<span>{{item.video_review}}</span>
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
        <footer>
        	<p>哔哩哔哩 沪ICP备13002172号-3</p>
   	    	<p>信息网络传播视听节目许可证：0910417</p>
        </footer>
		</div>
	</div>
</template>

<script>
	import CONFIG from "@/config"
	import axios from 'axios'
    import Swiper from 'swiper';
     import 'swiper/dist/css/swiper.min.css';
	export default {
		 props: ['listImg'],
        mounted(){
        	var swiper=new Swiper('.swiper-container',{
                paginationClickable: true,
                loop: true,
                autoplay: true,
        		pargination:{
        			el:'.swiper-pagination',
        		},
        	})
        	this.sy()
        },
        data(){
        	return {
        	   sye:[],
        	}
        },
        methods:{
        	sy(){
        		var url=CONFIG.domain+"/sy";
			    console.log(axios);
			    axios.get(url).then((res)=>{
				   console.log(this);
				   this.sye=res.data.data.list;
			    })
        	}
        }
	}
</script>

<style lang="scss">
	.web_s {
		.swiper-wrapper{
			img{
				width:100%;
			}
		}
		.content{
			width: 92%;
			margin:0 auto;
			.c_wrap{
		    	margin: 15px 0;
		    	.fir{
		    		width: 48%;
		    		position: relative;
		    		display: inline-block;
		    		margin-bottom:20px;
		    		img{
		    			width: 100%;
		    			height: 80px;
		    			border-radius:8px;
		    		}
		    		p{
		    			font-size: 10px;
		    			/*display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp:2;*/
						overflow: hidden;
						height: 32px;
		    		}
		    		.dw{
		    			position: absolute;
		    			bottom:35px;
		    			left:10px;
		    			svg{
		    				width: 12px;
		    				height: 20px;
		    				vertical-align: middle;
		    				fill: #fff;
		    			}
                        /*svg:nth-of-type(2){
                        	margin-left: 10px;
                        }*/
                        span{
                        	font-size: 12px;
                        	vertical-align: middle;
                            color: #fff;
                        } 
		    		}
		    	}
		    	.fir:nth-of-type(2n){
		    		float: right;
		    	}
		    }
		}
		footer{
			padding: 20px 0 10px;
			text-align: center;
			p{
				font-size: 12px;
				color: #999;
				line-height:22px;
			}
		}
	}
</style>